1
|
|
|
var CreateWorkEnvironmentAPI = {}; |
2
|
|
|
|
3
|
|
|
CreateWorkEnvironmentAPI.workplacePhotoUploaders = []; |
4
|
|
|
|
5
|
|
|
CreateWorkEnvironmentAPI.photoNameToCaptionFormId = {'workplace_photo_1': 'workplace_photo_caption_1', |
6
|
|
|
'workplace_photo_2': 'workplace_photo_caption_2', |
7
|
|
|
'workplace_photo_3': 'workplace_photo_caption_3'}; |
8
|
|
|
|
9
|
|
|
CreateWorkEnvironmentAPI.defaultWorkplacePhoto = '/images/user.png'; |
10
|
|
|
|
11
|
|
|
/** |
12
|
|
|
* |
13
|
|
|
* @param {string} photo_name |
14
|
|
|
* @param {string} description |
15
|
|
|
* @return {CreateWorkEnvironment.WorkplacePhotoCaption} |
16
|
|
|
*/ |
17
|
|
|
CreateWorkEnvironmentAPI.WorkplacePhotoCaption = function (photo_name, description) { |
18
|
|
|
this.photo_name = photo_name; |
19
|
|
|
this.description = description; |
20
|
|
|
}; |
21
|
|
|
|
22
|
|
|
/** |
23
|
|
|
* |
24
|
|
|
* @param {string} remote_allowed |
25
|
|
|
* @param {string} telework_allowed |
26
|
|
|
* @param {string} flexible_allowed |
27
|
|
|
* @param {CreateWorkEnvironment.WorkplacePhotoCaption[]} workplace_photo_captions |
28
|
|
|
* @return {CreateWorkEnvironment.WorkEnvironment} |
29
|
|
|
*/ |
30
|
|
|
CreateWorkEnvironmentAPI.WorkEnvironment = function (remote_allowed, telework_allowed, |
31
|
|
|
flexible_allowed, workplace_photo_captions) { |
32
|
|
|
this.remote_allowed = remote_allowed; |
33
|
|
|
this.telework_allowed = telework_allowed; |
34
|
|
|
this.flexible_allowed = flexible_allowed; |
35
|
|
|
this.workplace_photo_captions = workplace_photo_captions; |
36
|
|
|
}; |
37
|
|
|
|
38
|
|
|
CreateWorkEnvironmentAPI.localizeCreateWorkEnvironment = function () { |
39
|
|
|
if (siteContent) { |
|
|
|
|
40
|
|
|
try { |
41
|
|
|
document.getElementById('remoteWork_label').innerHTML = siteContent.remoteLocationAllowed; |
42
|
|
|
document.getElementById('remoteWork_option0_label').innerHTML = SliderAPI.getYesNoSliderLabel("option0"); |
|
|
|
|
43
|
|
|
document.getElementById('remoteWork_option1_label').innerHTML = SliderAPI.getYesNoSliderLabel("option1"); |
44
|
|
|
|
45
|
|
|
document.getElementById('telework_label').innerHTML = siteContent.teleworkAllowed; |
46
|
|
|
document.getElementById('telework_option0_label').innerHTML = SliderAPI.getFrequencySliderLabel("option0"); |
47
|
|
|
document.getElementById('telework_option1_label').innerHTML = SliderAPI.getFrequencySliderLabel("option1"); |
48
|
|
|
document.getElementById('telework_option2_label').innerHTML = SliderAPI.getFrequencySliderLabel("option2"); |
49
|
|
|
document.getElementById('telework_option3_label').innerHTML = SliderAPI.getFrequencySliderLabel("option3"); |
50
|
|
|
document.getElementById('telework_option4_label').innerHTML = SliderAPI.getFrequencySliderLabel("option4"); |
51
|
|
|
|
52
|
|
|
document.getElementById('flexHours_label').innerHTML = siteContent.flexHoursAllowed; |
53
|
|
|
document.getElementById('flexHours_option0_label').innerHTML = SliderAPI.getFrequencySliderLabel("option0"); |
54
|
|
|
document.getElementById('flexHours_option1_label').innerHTML = SliderAPI.getFrequencySliderLabel("option1"); |
55
|
|
|
document.getElementById('flexHours_option2_label').innerHTML = SliderAPI.getFrequencySliderLabel("option2"); |
56
|
|
|
document.getElementById('flexHours_option3_label').innerHTML = SliderAPI.getFrequencySliderLabel("option3"); |
57
|
|
|
document.getElementById('flexHours_option4_label').innerHTML = SliderAPI.getFrequencySliderLabel("option4"); |
58
|
|
|
|
59
|
|
|
document.getElementById('physicalEnvironment_title').innerHTML = siteContent.physicalEnvironment; |
60
|
|
|
} catch (e) { |
61
|
|
|
(console.error || console.log).call(console, e.stack || e); |
62
|
|
|
} |
63
|
|
|
} |
64
|
|
|
}; |
65
|
|
|
|
66
|
|
|
CreateWorkEnvironmentAPI.parseWorkEnvironmentResponse = function (response) { |
67
|
|
|
var json = JSON.parse(response); |
68
|
|
|
var workEnvironment = new CreateWorkEnvironmentAPI.WorkEnvironment( |
69
|
|
|
json.basic_work_environment.remote_allowed, |
70
|
|
|
json.basic_work_environment.telework_allowed, |
71
|
|
|
json.basic_work_environment.flexible_allowed, |
72
|
|
|
[] |
73
|
|
|
); |
74
|
|
|
var captions = json.workplace_photo_captions; |
75
|
|
|
for (var i = 0; i < captions.length; i++) { |
76
|
|
|
var caption = captions[i]; |
77
|
|
|
var workplacePhotoCaption = new CreateWorkEnvironmentAPI.WorkplacePhotoCaption( |
78
|
|
|
caption.photo_name, |
79
|
|
|
caption.description |
80
|
|
|
); |
81
|
|
|
workEnvironment.workplace_photo_captions.push(workplacePhotoCaption); |
82
|
|
|
} |
83
|
|
|
return workEnvironment; |
84
|
|
|
}; |
85
|
|
|
|
86
|
|
|
CreateWorkEnvironmentAPI.initializeWorkEnvironmentForm = function (managerProfileId) { |
87
|
|
|
//Fill previous form fields |
88
|
|
|
DataAPI.getWorkplaceEnvironment(managerProfileId, function (response) { |
|
|
|
|
89
|
|
|
var workEnv = CreateWorkEnvironmentAPI.parseWorkEnvironmentResponse(response); |
90
|
|
|
CreateWorkEnvironmentAPI.populateWorkEnvironmentForm(workEnv); |
91
|
|
|
}) |
|
|
|
|
92
|
|
|
|
93
|
|
|
//Show preivious workplace photos |
94
|
|
|
CreateWorkEnvironmentAPI.refreshWorkplacePhoto(managerProfileId, 'workplace_photo_1', 'workEnvironment_photo_1'); |
95
|
|
|
CreateWorkEnvironmentAPI.refreshWorkplacePhoto(managerProfileId, 'workplace_photo_2', 'workEnvironment_photo_2'); |
96
|
|
|
CreateWorkEnvironmentAPI.refreshWorkplacePhoto(managerProfileId, 'workplace_photo_3', 'workEnvironment_photo_3'); |
97
|
|
|
|
98
|
|
|
//Set up photo uploaders |
99
|
|
|
CreateWorkEnvironmentAPI.workplacePhotoUploaders = []; |
100
|
|
|
var uploader1 = CreateWorkEnvironmentAPI.makeWorkplacePhotoUploader(managerProfileId, 'workplace_photo_1', |
101
|
|
|
'workplace_photo_input_1', null, 'workEnvironment_photo_1'); |
102
|
|
|
var uploader2 = CreateWorkEnvironmentAPI.makeWorkplacePhotoUploader(managerProfileId, 'workplace_photo_2', |
103
|
|
|
'workplace_photo_input_2', null, 'workEnvironment_photo_2'); |
104
|
|
|
var uploader3 = CreateWorkEnvironmentAPI.makeWorkplacePhotoUploader(managerProfileId, 'workplace_photo_3', |
105
|
|
|
'workplace_photo_input_3', null, 'workEnvironment_photo_3'); |
106
|
|
|
|
107
|
|
|
CreateWorkEnvironmentAPI.workplacePhotoUploaders.push(uploader1, uploader2, uploader3); |
108
|
|
|
}; |
109
|
|
|
|
110
|
|
|
/** |
111
|
|
|
* |
112
|
|
|
* @param {CreateWorkEnvironment.WorkEnvironment} workEnvironment |
113
|
|
|
* @return {undefined} |
114
|
|
|
*/ |
115
|
|
|
CreateWorkEnvironmentAPI.populateWorkEnvironmentForm = function (workEnvironment) { |
116
|
|
|
|
117
|
|
|
|
118
|
|
|
|
119
|
|
|
|
120
|
|
|
SliderAPI.selectOptionByValue("createEditProfile_remoteWork", workEnvironment.remote_allowed, "remoteWork"); |
|
|
|
|
121
|
|
|
SliderAPI.selectOptionByValue("createEditProfile_telework", workEnvironment.telework_allowed, "telework"); |
122
|
|
|
SliderAPI.selectOptionByValue("createEditProfile_flexHours", workEnvironment.flexible_allowed, "flexHours"); |
123
|
|
|
var captions = workEnvironment.workplace_photo_captions; |
124
|
|
|
for (var i = 0; i < captions.length; i++) { |
125
|
|
|
var caption = captions[i]; |
126
|
|
|
var captionFormElementId = CreateWorkEnvironmentAPI.photoNameToCaptionFormId[caption.photo_name]; |
127
|
|
|
if (captionFormElementId) { |
128
|
|
|
document.getElementById(captionFormElementId).value = caption.description; |
129
|
|
|
} |
130
|
|
|
} |
131
|
|
|
}; |
132
|
|
|
|
133
|
|
|
CreateWorkEnvironmentAPI.refreshWorkplacePhoto = function (managerProfileId, photoName, previewImageElementId) { |
134
|
|
|
var photoUrl = DataAPI.baseURL + '/getWorkplacePhotoByManagerProfileAndName/' + managerProfileId + '/' + photoName; |
|
|
|
|
135
|
|
|
DataAPI.sendRequest(photoUrl, 'GET', {"Accept":"image/*"}, null, function(request) { |
136
|
|
|
var img = document.getElementById(previewImageElementId); |
137
|
|
|
if (request.status == 200 && request.responseURL) { |
138
|
|
|
img.src = request.responseURL; |
139
|
|
|
} else { |
140
|
|
|
img.src = CreateWorkEnvironmentAPI.defaultWorkplacePhoto; |
141
|
|
|
} |
142
|
|
|
}); |
143
|
|
|
}; |
144
|
|
|
|
145
|
|
|
CreateWorkEnvironmentAPI.saveWorkEnvironment = function (managerProfileId) { |
146
|
|
|
var defaultOption = "option0"; |
147
|
|
|
var remoteAllowedSelected = document.querySelector('input[name="createEditProfile_remoteWork"]:checked'); |
148
|
|
|
if (remoteAllowedSelected === null) { |
149
|
|
|
var remoteAllowed = defaultOption; |
150
|
|
|
} else { |
151
|
|
|
var remoteAllowed = remoteAllowedSelected.value; |
|
|
|
|
152
|
|
|
} |
153
|
|
|
|
154
|
|
|
var teleworkAllowedSelected = document.querySelector('input[name="createEditProfile_telework"]:checked'); |
155
|
|
|
if (teleworkAllowedSelected === null) { |
156
|
|
|
var teleworkAllowed = defaultOption; |
157
|
|
|
} else { |
158
|
|
|
var teleworkAllowed = teleworkAllowedSelected.value; |
|
|
|
|
159
|
|
|
} |
160
|
|
|
|
161
|
|
|
var flexibleAllowedSelected = document.querySelector('input[name="createEditProfile_flexHours"]:checked'); |
162
|
|
|
if (flexibleAllowedSelected === null) { |
163
|
|
|
var flexibleAllowed = defaultOption; |
164
|
|
|
} else { |
165
|
|
|
var flexibleAllowed = flexibleAllowedSelected.value; |
|
|
|
|
166
|
|
|
} |
167
|
|
|
|
168
|
|
|
var workEnvironment = new CreateWorkEnvironmentAPI.WorkEnvironment(remoteAllowed, teleworkAllowed, flexibleAllowed, []); |
|
|
|
|
169
|
|
|
|
170
|
|
|
for (var name in CreateWorkEnvironmentAPI.photoNameToCaptionFormId) { |
|
|
|
|
171
|
|
|
var descriptionFormId = CreateWorkEnvironmentAPI.photoNameToCaptionFormId[name]; |
172
|
|
|
var description = document.getElementById(descriptionFormId).value; |
173
|
|
|
var photoCaption = new CreateWorkEnvironmentAPI.WorkplacePhotoCaption(name, description); |
174
|
|
|
workEnvironment.workplace_photo_captions.push(photoCaption); |
175
|
|
|
} |
176
|
|
|
|
177
|
|
|
DataAPI.submitWorkplaceEnvironment(managerProfileId, workEnvironment, function () {}); //TODO add response callback |
|
|
|
|
178
|
|
|
|
179
|
|
|
for (var i = 0; i < CreateWorkEnvironmentAPI.workplacePhotoUploaders.length; i++) { |
180
|
|
|
CreateWorkEnvironmentAPI.workplacePhotoUploaders[i].uploadPhoto(); |
181
|
|
|
} |
182
|
|
|
} |
|
|
|
|
183
|
|
|
|
184
|
|
|
CreateWorkEnvironmentAPI.makeWorkplacePhotoUploader = function (managerProfileId, photoName, inputId, dropzoneId, previewId) { |
185
|
|
|
var photoInput = document.getElementById(inputId); |
186
|
|
|
if (dropzoneId) { |
187
|
|
|
var photoDropzone = document.getElementById(dropzoneId); |
188
|
|
|
} else { |
189
|
|
|
var photoDropzone = null; |
|
|
|
|
190
|
|
|
} |
191
|
|
|
var photoPreview = document.getElementById(previewId); |
192
|
|
|
var uploadUrl = DataAPI.baseURL + "/putWorkplacePhotoByManagerProfileAndName/" + managerProfileId + '/' + photoName; |
|
|
|
|
193
|
|
|
|
194
|
|
|
var uploader = new CreateWorkEnvironmentAPI.WorkplacePhotoUploader( |
195
|
|
|
photoInput, photoDropzone, photoPreview, |
|
|
|
|
196
|
|
|
uploadUrl, |
197
|
|
|
function (request) { |
|
|
|
|
198
|
|
|
//TODO: handle upload response |
199
|
|
|
|
200
|
|
|
}); |
201
|
|
|
|
202
|
|
|
return uploader; |
203
|
|
|
}; |
204
|
|
|
|
205
|
|
|
CreateWorkEnvironmentAPI.WorkplacePhotoUploader = function ( |
206
|
|
|
inputField, dropZone, previewImgElement, |
207
|
|
|
uploadUrl, |
208
|
|
|
onUploadComplete) { |
209
|
|
|
|
210
|
|
|
this.inputField = inputField; |
211
|
|
|
this.dropZone = dropZone; |
212
|
|
|
this.previewImgElement = previewImgElement; |
213
|
|
|
this.uploadUrl = uploadUrl; |
214
|
|
|
this.onUploadComplete = onUploadComplete; |
215
|
|
|
|
216
|
|
|
this.photo = null; |
217
|
|
|
this.max_filesize = 2048576; |
218
|
|
|
this.defaultPhotoSrc = CreateWorkEnvironmentAPI.defaultWorkplacePhoto; |
219
|
|
|
|
220
|
|
|
var self = this; |
221
|
|
|
|
222
|
|
|
self.init = function () { |
223
|
|
|
self.inputField.onchange = self.addFiles; |
224
|
|
|
if (self.dropZone) |
225
|
|
|
self.initializeDropzone(); |
|
|
|
|
226
|
|
|
}; |
227
|
|
|
|
228
|
|
|
//clone dropZone to remove existing event listeners |
229
|
|
|
self.initializeDropzone = function () { |
230
|
|
|
var clone = self.dropZone.cloneNode(); |
231
|
|
|
while (self.dropZone.firstChild) { |
232
|
|
|
clone.appendChild(self.dropZone.lastChild); |
233
|
|
|
} |
234
|
|
|
self.dropZone.parentNode.replaceChild(clone, self.dropZone); |
235
|
|
|
self.dropZone = clone; |
236
|
|
|
|
237
|
|
|
self.dropZone.addEventListener("dragenter", self.stopProp, false); |
238
|
|
|
self.dropZone.addEventListener("dragleave", self.dragExit, false); |
239
|
|
|
self.dropZone.addEventListener("dragover", self.dragOver, false); |
240
|
|
|
self.dropZone.addEventListener("drop", self.processDroppedFiles, false); |
241
|
|
|
}; |
242
|
|
|
|
243
|
|
|
self.setFiles = function (files) { |
244
|
|
|
self.processNewFiles(files); |
245
|
|
|
}; |
246
|
|
|
|
247
|
|
|
self.addFiles = function () { |
248
|
|
|
self.processNewFiles(this.files); |
249
|
|
|
}; |
250
|
|
|
|
251
|
|
|
self.processDroppedFiles = function (ev) { |
252
|
|
|
self.stopProp(ev); |
253
|
|
|
var files = ev.dataTransfer.files; |
254
|
|
|
self.processNewFiles(files); |
255
|
|
|
}; |
256
|
|
|
|
257
|
|
|
self.dragOver = function (ev) { |
258
|
|
|
self.stopProp(ev); |
259
|
|
|
self.dropZone.classList.remove("fileDropzoneNormal"); |
260
|
|
|
self.dropZone.classList.add("fileDropzoneHighlight"); |
261
|
|
|
//this.style["backgroundColor"] = "#F0FCF0"; |
262
|
|
|
//this.style["borderColor"] = "#3DD13F"; |
263
|
|
|
//this.style["color"] = "#3DD13F"; |
264
|
|
|
}; |
265
|
|
|
|
266
|
|
|
self.dragExit = function (ev) { |
267
|
|
|
self.stopProp(ev); |
268
|
|
|
self.dropZone.classList.remove("fileDropzoneHighlight"); |
269
|
|
|
self.dropZone.classList.add("fileDropzoneNormal"); |
270
|
|
|
//dropZone.style["backgroundColor"] = "#FEFEFE"; |
271
|
|
|
//dropZone.style["borderColor"] = "#CCC"; |
272
|
|
|
//dropZone.style["color"] = "#CCC"; |
273
|
|
|
}; |
274
|
|
|
|
275
|
|
|
self.stopProp = function (ev) { |
276
|
|
|
ev.stopPropagation(); |
277
|
|
|
ev.preventDefault(); |
278
|
|
|
}; |
279
|
|
|
|
280
|
|
|
self.clearUpload = function () { |
281
|
|
|
//Clear upload |
282
|
|
|
self.photo = null; |
283
|
|
|
|
284
|
|
|
//Clear preview |
285
|
|
|
self.previewImgElement.src = self.defaultPhotoSrc; |
286
|
|
|
|
287
|
|
|
//Clear input button value |
288
|
|
|
self.inputField.value = null; |
289
|
|
|
}; |
290
|
|
|
|
291
|
|
|
self.processNewFiles = function (files) { |
292
|
|
|
var file = files[0]; |
293
|
|
|
if (file.type.match('image.*')) { |
294
|
|
|
self.clearUpload(); |
295
|
|
|
var fr = new FileReader(); |
|
|
|
|
296
|
|
|
fr.file = file; |
297
|
|
|
fr.onloadend = function (ev) { |
298
|
|
|
|
299
|
|
|
if (ev.target.file.size < self.max_filesize) { |
300
|
|
|
self.photo = ev.target.file; |
301
|
|
|
self.previewImgElement.src = ev.target.result; |
302
|
|
|
} else { |
|
|
|
|
303
|
|
|
//TODO: indicate overlarge file |
304
|
|
|
} |
305
|
|
|
}; |
306
|
|
|
fr.readAsDataURL(fr.file); |
307
|
|
|
} else { |
|
|
|
|
308
|
|
|
//TODO: indicate imporper file type |
309
|
|
|
} |
310
|
|
|
}; |
311
|
|
|
|
312
|
|
|
self.uploadPhoto = function () { |
313
|
|
|
if (self.photo) { |
314
|
|
|
var headers = {"Content-type": self.photo.type, |
315
|
|
|
"X-File-Name": self.photo.name, |
316
|
|
|
"Accept": "application/json" |
317
|
|
|
} |
|
|
|
|
318
|
|
|
DataAPI.sendRequest(self.uploadUrl, "PUT", headers, self.photo, function(request) { |
|
|
|
|
319
|
|
|
if (self.onUploadComplete) { |
320
|
|
|
self.onUploadComplete(request); |
321
|
|
|
} |
322
|
|
|
}); |
323
|
|
|
} |
324
|
|
|
}; |
325
|
|
|
|
326
|
|
|
self.init(); //call init function at end of constructor |
327
|
|
|
}; |
328
|
|
|
|
329
|
|
|
|
330
|
|
|
|